<!-- 活动场地新增、修改 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      :title="titleMap[type]"
      centered
      :width="800"
      v-model="visible"
      @cancel="resetFields"
    >
      <a-form-model :model="form" ref="form" layout="horizontal" :rules="rules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="导航选地址:" prop="address">
          <a-input v-model="form.address" placeholder="请选择地图导航" :disabled="true" />
          <a-button type="primary" @click="handleOpenMap">选择地图导航</a-button>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="详细地址:" prop="addressName">
          <a-input v-model="form.addressName" placeholder="请输入详细地址" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button @click="visible = false">取消</a-button>
        <a-button type="primary" @click="debounce(handleSubmit)">确定</a-button>
      </template>
    </a-modal>
    <Map
      ref="map"
      :infoData="{ longitude: form.longitude, latitude: form.latitude, address: form.address }"
      @ok="handleOk"
    ></Map>
  </div>
</template>

<script>
import { activitySiteCreate, activitySiteEdit } from '@/api/activity/activity'
import { debounce } from '@/utils/common'
import Map from './map'
export default {
  components: {
    Map
  },
  data() {
    return {
      visible: false,
      type: 'add',
      form: {
        id: undefined,
        addressName: undefined,
        address: undefined,
        longitude: undefined,
        latitude: undefined
        // rowNum: undefined,
        // columnNum: undefined
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      rules: {
        addressName: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 5, max: 200, message: '详细地址需为5-200个字符串', trigger: 'blur' }
        ],
        address: [{ required: true, message: '请选择导航地址', trigger: 'change' }]
      },
      titleMap: {
        add: '新增',
        edit: '编辑'
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    debounce,
    show(obj) {
      this.type = obj.type
      this.visible = true
      Object.keys(this.form).forEach(k => {
        this.form[k] = obj.type === 'add' ? undefined : obj.data[k]
      })
    },
    resetFields() {
      console.log('清除验证')
      this.$refs.form.resetFields()
    },
    handleOpenMap() {
      this.$refs.map.show()
    },
    handleOk(data) {
      // Object.keys(data).forEach(k => {
      //     this.form[k] = data[k]
      // })
      this.form.address = data.address
      this.form.addressName = data.address
      this.form.longitude = data.longitude
      this.form.latitude = data.latitude
      this.$refs.form.clearValidate()
    },
    async handleSubmit() {
      let res = {}
      this.$refs.form.validate(async valid => {
        console.log('valid---->', valid)
        if (valid) {
          if (this.type === 'add') {
            res = await activitySiteCreate({ ...this.form })
          } else {
            res = await activitySiteEdit({ ...this.form })
          }

          this.visible = false
          this.$message.success(`${this.titleMap[this.type]}成功`)
          this.$emit('success', res.data)
        }
      })
      // if (this.type === 'add') {
      //     res = await activitySiteCreate(this.form)
      // } else {
      //     res = await activitySiteEdit({ ...this.form, id: this.id })
      // }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
